<template>
  <el-container class="board-block">
    <el-header class="board-block__header" :height="headerHeight" v-if="title">
      <section class="title-block">
        <div class="title-block__label"></div>
        <label class="title-block__content">{{ title }}</label>
      </section>
      <slot name="header"></slot>
    </el-header>
    <el-main class="board-block__main">
      <slot> </slot>
    </el-main>
    <el-footer class="board-block__footer" :height="footerHeight"><slot name="footer"></slot></el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'billBoardBlock',
  data() {
    return {
      loading: false
    }
  },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 头部高度
    headerHeight: {
      type: String,
      default: '35px'
    },
    // 脚部高度
    footerHeight: {
      type: String,
      default: '0'
    }
  }
}
</script>

<style lang="scss" scoped>
$app-block-radius: 10px;

.block-basic {
  background: white;
  border-radius: $app-block-radius;
  height: fit-content;
}
.board-block {
  @extend .block-basic;
  @at-root &__header {
    // 看板小标题
    .title-block {
      padding: 10px 0;
      flex: 1;
      @at-root &__label {
        height: 14px;
        width: 5px;
        margin-right: 2px;
        display: inline-block;
        vertical-align: middle;
        background: var(--tap-main-color, #409eff);
        border-radius: 5px;
      }
      @at-root &__content {
        vertical-align: middle;
        color: black;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
  @at-root &__main {
    padding: 10px 20px;
  }
}
</style>
